<template>
  <div class="circle-progress">
    <!-- ECharts container -->
    <div class="circularChart" ref="circularChart" :style="{ width: chartWidth, height: chartHeight }"></div>
    <!-- Text below the chart -->
    <div class="label">{{ label }}</div>
  </div>
</template>

<script>
export default {
  name: 'CircleProgress',
  props: {
    // Percentage value for the progress (0-100)
    percentage: {
      type: Number,
      default: 75,
      validator: (value) => value >= 0 && value <= 100
    },
    // Label text below the chart
    label: {
      type: String,
      default: '被占用率'
    },
    // Chart width
    chartWidth: {
      type: String,
      default: '7vw'
    },
    // Chart height
    chartHeight: {
      type: String,
      default: '7vw'
    },
    color1: {
      type: String,
      default: '#006CFF'
    },
    color2: {
      type: String,
      default: '#00CFFF'
    }
    // Unique ID for the chart (to avoid conflicts if multiple instances are used)

  },
  data() {
    return {
      chart: null // ECharts instance
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    // Clean up the chart instance to prevent memory leaks
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  watch: {
    // Re-render the chart if the percentage changes
    percentage() {
      this.initChart();
    }
  },
  methods: {
    initChart() {
      const chart = this.$echarts.init(this.$refs.circularChart)


      const option = {
        series: [
          {
            type: 'gauge', // 改为 gauge 类型
            startAngle: 245, // 开始角度，设置为 245 度
            endAngle: -70,   // 结束角度，设置为 -70 度，确保开口在底部
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                width: 13, // 环的厚度
                color: [[1, '#2A3B5A']] // 背景环的颜色
              }
            },
            progress: {
              show: true,
              width: 13, // 填充部分的厚度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0, // 水平渐变
                  colorStops: [
                    { offset: 0, color: this.color1 }, // 渐变起始颜色
                    { offset: 1, color: this.color2 } // 渐变结束颜色
                  ]
                }
              }
            },
            axisLabel: { show: false }, // 隐藏刻度标签
            axisTick: { show: false },  // 隐藏刻度线
            splitLine: { show: false }, // 隐藏分割线
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
              fontSize: 18,
              fontWeight: 'bold',
              color: '#fff',
              offsetCenter: [0, '0%'] // 百分比标签居中
            },
            data: [{ value: this.percentage }],
            // 去掉指针
            pointer: {
              show: false // 设置为 false 即可隐藏指针
            }
          }
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.circle-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chart {
  margin: 0 auto;
}

.label {
  margin-top: 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
</style>